<template>
    <CheckboxGroup :model-value="refValue" v-bind="refRestProps" :disabled="disabled" @change="inputChange" />
</template>

<script lang="ts" setup>
import {CheckboxGroup} from './basic';
import {computed} from 'vue';
import {omit} from 'lodash-es';

const modelValue = defineModel<string>();

const props = defineProps({
    items: {
        type: Array<{value: string; label: string}>,
        default: () => []
    },
    disabled: Boolean,
    readonly: Boolean
});

const emit = defineEmits(['update:modelValue']);

const refValue = computed(() => {
    return modelValue.value ? modelValue.value.split(',') : [];
});
const refRestProps = computed(() => omit(props, 'modelValue'));
const inputChange = (inputValue) => {
    if (!inputValue?.length) {
        emit('update:modelValue', null);
        return;
    }
    emit('update:modelValue', inputValue.join(','));
};
</script>
